<template>
  <el-row :gutter="20">
    <el-col :span="24">
      <vab-query-form>
        <vab-query-form-top-panel>
          <el-form :inline="true" label-width="0" @submit.native.prevent>
            <el-form-item label="">
              <el-input v-model="queryForm.title" />
            </el-form-item>
            <el-form-item label-width="0">
              <el-button native-type="submit" type="primary" @click="queryData">
                查询
              </el-button>
            </el-form-item>
          </el-form>
        </vab-query-form-top-panel>
      </vab-query-form>
    </el-col>

    <el-col v-for="(item, index) in queryIcon" :key="index" :span="6">
      <el-card shadow="hover" @click.native="handleIcon(item)">
        <vab-icon :icon="item" />
      </el-card>
    </el-col>
    <el-col :span="24">
      <el-pagination
        :background="background"
        :current-page="queryForm.pageNo"
        :layout="layout"
        :page-size="queryForm.pageSize"
        :total="total"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      />
    </el-col>
  </el-row>
</template>

<script>
import { getIconList } from '@/api/remixIcon'

export default {
  name: 'VabIconSelector',
  data() {
    return {
      icon: '24-hours-fill',
      layout: 'total, prev, next',
      total: 0,
      background: true,
      height: 0,
      selectRows: '',
      queryIcon: [],
      queryForm: {
        pageNo: 1,
        pageSize: 16,
        title: '',
      },
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    handleSizeChange(val) {
      this.queryForm.pageSize = val
      this.fetchData()
    },
    handleCurrentChange(val) {
      this.queryForm.pageNo = val
      this.fetchData()
    },
    queryData() {
      this.queryForm.pageNo = 1
      this.fetchData()
    },
    async fetchData() {
      const { data, totalCount } = await getIconList(this.queryForm)
      this.queryIcon = data
      this.total = totalCount
    },
    handleIcon(item) {
      this.icon = item
      this.$emit('handle-icon', item)
    },
  },
}
</script>

<style lang="scss">
.icon-selector-popper {
  .el-card__body {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 20px;
    cursor: pointer;

    i {
      font-size: 28px;
      color: $base-color-gray;
      text-align: center;
      vertical-align: middle;
      pointer-events: none;
      cursor: pointer;
    }
  }

  .el-pagination {
    margin: 0;
  }
}
</style>
